import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Box, Typography, Paper, List, ListItem, ListItemText, Divider, Button } from '@mui/material';

// 定义要测试的翻译键
const TEST_KEYS = [
  'app.title',
  'nav.dashboard',
  'nav.patterns',
  'dashboard.welcome',
  'dashboard.description',
  'dashboard.progress.title',
  'dashboard.completed.title',
  'dashboard.available.title',
  'dashboard.resetToBeginner',
  'challenge.levels.Beginner',
  'challenge.levels.Intermediate',
  'challenge.levels.Advanced',
  'patterns.names.Singleton',
  'patterns.descriptions.Singleton'
];

const I18nTester: React.FC = () => {
  const { t, i18n } = useTranslation();
  const [translations, setTranslations] = useState<Record<string, string>>({});
  const [currentLang, setCurrentLang] = useState<string>(i18n.language);
  const [languageList, setLanguageList] = useState<string[]>([]);
  const [translationLoaded, setTranslationLoaded] = useState<boolean>(false);

  useEffect(() => {
    // 获取支持的语言列表
    setLanguageList(i18n.languages || []);
    
    // 获取当前语言
    setCurrentLang(i18n.language);
    
    // 添加加载完成的监听器
    const handleLoaded = () => {
      setTranslationLoaded(true);
      updateTranslations();
    };
    
    i18n.on('loaded', handleLoaded);
    
    // 添加语言改变的监听器
    const handleLanguageChanged = (lng: string) => {
      setCurrentLang(lng);
      updateTranslations();
    };
    
    i18n.on('languageChanged', handleLanguageChanged);
    
    // 初始加载翻译
    updateTranslations();
    
    return () => {
      i18n.off('loaded', handleLoaded);
      i18n.off('languageChanged', handleLanguageChanged);
    };
  }, [i18n]);

  // 更新所有测试键的翻译
  const updateTranslations = () => {
    const newTranslations: Record<string, string> = {};
    TEST_KEYS.forEach(key => {
      newTranslations[key] = t(key);
    });
    setTranslations(newTranslations);
  };

  // 切换语言
  const switchLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
  };

  return (
    <Box sx={{ p: 3 }}>
      <Typography variant="h4" gutterBottom>
        i18n 测试工具
      </Typography>
      
      <Paper sx={{ p: 2, mb: 3 }}>
        <Typography variant="h6" gutterBottom>
          当前状态
        </Typography>
        
        <List dense>
          <ListItem>
            <ListItemText 
              primary="当前语言" 
              secondary={currentLang} 
            />
          </ListItem>
          
          <ListItem>
            <ListItemText 
              primary="可用语言" 
              secondary={languageList.join(', ')} 
            />
          </ListItem>
          
          <ListItem>
            <ListItemText 
              primary="翻译已加载" 
              secondary={translationLoaded ? '是' : '否'} 
            />
          </ListItem>
        </List>
        
        <Box sx={{ mt: 2 }}>
          <Button 
            variant="contained" 
            color="primary" 
            onClick={() => switchLanguage('zh')}
            sx={{ mr: 1 }}
          >
            切换到中文
          </Button>
          <Button 
            variant="contained" 
            color="secondary" 
            onClick={() => switchLanguage('en')}
          >
            Switch to English
          </Button>
        </Box>
      </Paper>
      
      <Paper sx={{ p: 2 }}>
        <Typography variant="h6" gutterBottom>
          翻译测试
        </Typography>
        
        <List>
          {TEST_KEYS.map((key, index) => (
            <React.Fragment key={key}>
              {index > 0 && <Divider />}
              <ListItem>
                <ListItemText 
                  primary={key} 
                  secondary={translations[key] || '未找到翻译'} 
                />
              </ListItem>
            </React.Fragment>
          ))}
        </List>
      </Paper>
    </Box>
  );
};

export default I18nTester; 